<template>
    <div class="echaBox" ref="echaBox" style="width: 100%;height: 600px">

    </div>
    <button @click="() => {
        console.log('echartsecharts', data)
    }">123456</button>
</template>

<script lang="ts" , setup>
import * as echarts from 'echarts';
console.log('echartsecharts', echarts)
import { ref, onMounted } from 'vue';
const echaBox = ref();

var symbolSize = 20;
var data = [
    [0, 19],
    [1, 10],
    [2, 20],
    [3, 30],
    [4, 40],
    [5, 40],
    [6, 40],
    [7, 40],
    [8, 40],
    [9, 40],
    [10, 40],
    [11, 40]
];
onMounted(() => {
    const myChart = echarts.init(echaBox.value);
    myChart.setOption({
        tooltip: {
            triggerOn: 'none',
            formatter: function (params) {
                return (
                    'X: ' +
                    params.data[0].toFixed(2) +
                    '<br />Y: ' +
                    params.data[1].toFixed(2)
                );
            }
        },
        xAxis: {
            // data: ['A', 'B', 'C', 'D', 'E'],
            // type: 'category',
            name: 'x',
            // splitLine: { show: false },
            // axisLine: { onZero: false }
            axisLine: { onZero: true },
            axisTick: {
                alignWithLabel: true,
                interval: 0
            },
            boundaryGap: true
        },
        yAxis: { min: 0, max: 1000, type: 'value', axisLine: { onZero: true } },
        series: [
            { id: 'a', type: 'line', smooth: true, symbolSize: symbolSize, data: data },
            {
                id: 'b', type: 'line', smooth: true, symbolSize: symbolSize, data: data.map((item) => {
                    return [item[0], item[1] + 100]
                })
            }
        ]
    });
    myChart.setOption({
        graphic: echarts.util.map(data, function (item, dataIndex) {
            return {
                type: 'circle',
                position: myChart.convertToPixel('grid', item),
                shape: { r: symbolSize / 2 },
                invisible: true,
                draggable: true,
                ondrag: echarts.util.curry(onPointDragging, dataIndex),
                onmousemove: echarts.util.curry(showTooltip, dataIndex),
                onmouseout: echarts.util.curry(hideTooltip, dataIndex),
                z: 100
            };
        })
    });
    window.addEventListener('resize', function () {
        myChart.setOption({
            graphic: echarts.util.map(data, function (item, dataIndex) {
                return { position: myChart.convertToPixel('grid', item) };
            })
        });
    });
    function showTooltip(dataIndex) {
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: dataIndex
        });
    }
    function hideTooltip(dataIndex) {
        myChart.dispatchAction({ type: 'hideTip' });
    }
    function onPointDragging(dataIndex, dx, dy) {
        // console.log('dx, dy', dx, dy, this.position)
        data[dataIndex][1] = myChart.convertFromPixel('grid', this.position)[1];
        // console.log('data[dataIndex]', data[dataIndex])
        myChart.setOption({
            series: [
                {
                    id: 'a',
                    data: data
                }
            ]
        });
    }
})

</script>
